<template>
	<view>
		<image class="order-bg" mode="widthFix" :src="imageUrl +'list/g-bg.jpg'"></image>
		<u-navbar leftText="订单详情" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
			:bgColor="bgColor">
		</u-navbar>
		<view class="row-orderdet1">
			<view class="wp">
				<view class="m-orderdet1 m-orderbujiao1">
					<image class="bg1" mode="widthFix" :src="imageUrl +'list/bg3-1.png'"></image>
					<view class="box">
						<image class="car" mode="widthFix" :src="imageUrl +'list/car.png'"></image>
						<view class="top">
							<view class="tit tit1">支付倒计时02:17</view>
							<view class="num">鄂E·12345</view>
							<view class="ps">
								<image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'"></image>
								<view class="span">已认证</view>
							</view>
						</view>
						<view class="inner2">
							<view class="ul-order ul-order_bujiao">
								<view class="li">
									<navigator url="" hover-class="none" class="con">
										<view class="listnum box3">
											<view class="left3 num">订单号 155469446444646</view>
											<view class="right3">
												<view class="price3">￥<view class="span3">20.00</view>
												</view>
											</view>
										</view>
										<view class="inner">
											<view class="box">
												<view class="time">
													<view class="span2">02</view>小时<view class="span2">23</view>分钟
												</view>
												<view class="video">
													<image class="camera" mode="widthFix"
														:src="imageUrl +'list/camera.svg'">
														查看监控录像
												</view>
											</view>
											<view class="desc">
												<view class="p">
													<image class="icon" mode="widthFix"
														:src="imageUrl +'list/clock.svg'">
														2025-09-03 15:33:33 ~ 2025-09-03 17:33:33
												</view>
												<view class="p">
													<image class="icon" mode="widthFix"
														:src="imageUrl +'list/map-point.svg'">
														人民医院停车点
												</view>
											</view>
										</view>
									</navigator>
								</view>
								<view class="li">
									<navigator url="" hover-class="none" class="con">
										<view class="listnum box3">
											<view class="left3 num">订单号 155469446444646</view>
											<view class="right3">
												<view class="price3">￥<view class="span3">20.00</view>
												</view>
											</view>
										</view>
										<view class="inner">
											<view class="box">
												<view class="time">
													<view class="span2">02</view>小时<view class="span2">23</view>分钟
												</view>
												<view class="video">
													<image class="camera" mode="widthFix"
														:src="imageUrl +'list/camera.svg'">
														查看监控录像
												</view>
											</view>
											<view class="desc">
												<view class="p">
													<image class="icon" mode="widthFix"
														:src="imageUrl +'list/clock.svg'">
														2025-09-03 15:33:33 ~ 2025-09-03 17:33:33
												</view>
												<view class="p">
													<image class="icon" mode="widthFix"
														:src="imageUrl +'list/map-point2.svg'">
														人民医院停车点
												</view>
											</view>
										</view>
									</navigator>
								</view>
							</view>
							<view class="box3">
								<view class="left3">
									共2笔订单
								</view>
								<view class="right3">
									总额 <view class="price3">￥<view class="span3">40.00</view>

									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="m-orderdet1 m-orderdet3">
					<view class="dw">
						<view class="group">
							<view class="left">停车费用</view>
							<view class="right">￥40.00</view>
						</view>
						<view class="group">
							<view class="left">优惠券</view>
							<view class="right">暂无优惠券可用<u-icon name="arrow-right" color="rgba(28, 39, 76, 0.6)"
									size="12"></u-icon></view>
						</view>
						<view class="group">
							<view class="left left2">
							</view>
							<view class="price2 price3">
								费用总额<view class="span">￥40.00</view>
							</view>
						</view>
					</view>
				</view>
				<view class="m-orderdet4">
					<view class="tit">
						支付方式
					</view>
					<radio-group>
						<view class="radgroup">
							<label>
								<view class="left">
									<image class="icon" mode="widthFix" :src="imageUrl +'list/icon1.png'"></image>
									微信支付
								</view>
								<radio checked="false" value="1" style="transform:scale(0.8)" />
							</label>
							<label>
								<view class="left">
									<image class="icon" mode="widthFix" :src="imageUrl +'list/icon2.png'"></image>
									钱包支付(￥100)
								</view>
								<radio checked="true" value="2" style="transform:scale(0.8)" />
							</label>

						</view>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="g-ht"></view>
		<view class="g-dwbtn">
			<view class="left">总额<view class="p1">￥40.00</view>
			</view>
			<view class="right">
				<!-- <view class="btn1 btn3">确认支付</view> -->
				<navigator url="/pages/order/paysucc" class="btn1 btn3" hover-class="none">确认支付</navigator>
			</view>
		</view>
		<u-popup :show="show" closeable @close="close" @open="open" mode="center" :round="10">
			<view class="m-popdet1">
				<view class="tit">
					监控录像
				</view>
				<div class="pic">
					<video id="myVideo" class="video"
						src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
						@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
					<!-- <image :src="imageUrl +'list/pic1.jpg'" class="img" mode="aspectFill"></image> -->
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部背景色
				bgColor: 'transparent',
				show: false
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = '#ffffff'
				} else {
					this.bgColor = 'transparent'
				}
			},
			onCopy() {
				uni.setClipboardData({
					data: '1245444444564644',
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
					}
				});
			},

		}
	}
</script>

<style>
	/deep/ .uni-radio-input.uni-radio-input-checked {
		border-color: transparent !important;
		background: linear-gradient(98.86deg, #00BBFF 0%, #5ADA7A 100%) !important;
	}

	/deep/ .wx-radio-input.wx-radio-input-checked {
		border-color: transparent !important;
		background: linear-gradient(98.86deg, #00BBFF 0%, #5ADA7A 100%) !important;

	}
</style>